div<template>
  <a-card style="margin-top:24px;">
    <!-- 表格区域 -->
    <div class="operator">
      <a-button
        v-permission="`inspection:political:add`"
        type="primary"
        class="mr-8"
        @click="handleAdd"
        >新增</a-button
      >
      <!-- <a-button type="danger" @click="handleDelAll">批量删除</a-button> -->
    </div>

    <a-table
      :columns="columns"
      :row-key="item => item.id"
      :pagination="pagination"
      :data-source="dataSource"
      :loading="loading"
      @change="handleTableChange"
      :row-selection="rowSelection"
      bordered
    >
      <div slot="violationContent" slot-scope="text" class="ellipsis" :title="text">{{ text }}</div>

      <span slot="action" slot-scope="item">
        <a
          v-permission="`inspection:political:download`"
          href="javascript:;"
          @click="onFileDownloadClick(item)"
          >下载</a
        >
      </span>
    </a-table>

    <!-- 新增/修改弹窗 -->
    <a-modal
      title="新增"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form" v-bind="formItemLayout">
        <a-form-item label="字">
          <a-input
            v-decorator="['noticeWord', { rules: [{ required: true, message: '请填写字' }] }]"
            placeholder=""
          />
        </a-form-item>
        <a-form-item label="号">
          <a-input
            v-decorator="['noticeNumber', { rules: [{ required: true, message: '请填写号' }] }]"
            placeholder=""
          />
        </a-form-item>
        <a-form-item label="年">
          <a-select
            v-decorator="[
              'year',
              {
                rules: [{ required: true }],
                initialValue: thisYear,
                message: '汇总年份',
              },
            ]"
          >
            <a-select-option
              v-for="(item, index) in [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]"
              :key="thisYear - index"
              :value="thisYear - index"
              >{{ thisYear - index }}年</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="周期">
          <a-select
            v-decorator="['inspectionCycle', { rules: [{ required: true }], initialValue: '季' }]"
            @change="handleChangeCycle"
          >
            <!-- <a-select-option value="月">月</a-select-option> -->
            <a-select-option value="季">季</a-select-option>
            <!-- <a-select-option value="半年">半年</a-select-option> -->
            <a-select-option value="年">年</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="周期数">
          <!-- @change="handleChange" -->
          <a-select
            v-decorator="[
              'inspectionCycleNumber',
              { rules: [{ required: true, message: '请选择周期数' }] },
            ]"
          >
            <a-select-option
              v-for="item in cyclesNumber[cyclesing].date"
              :key="item"
              :value="item"
              >{{ item }}</a-select-option
            >
            <!-- <a-select-option value="季">季</a-select-option>
          <a-select-option value="半年">半年</a-select-option>
          <a-select-option value="年">年</a-select-option> -->
          </a-select>
        </a-form-item>
        <a-form-item label="支部">
          <a-select
            v-decorator="['branchId', { rules: [{ required: true, message: '请选择支部' }] }]"
            @change="handleChange"
          >
            <a-select-option
              v-for="(item, index) in branchList"
              :key="item.id + '' + index"
              :value="item.id"
              >{{ item.branchName }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="部门">
          <a-select
            mode="multiple"
            v-decorator="['deptList', { rules: [{ required: false, message: '部门' }] }]"
          >
            <a-select-option
              v-for="(item, index) in branchListDepartment"
              :key="item.id + '' + index * 22"
              :value="item.id"
              >{{ item.deptName }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="整改内容">
          <a-textarea
            v-decorator="['violationContent', { rules: [{ required: true }] }]"
            placeholder="请输入"
            :rows="3"
          />
        </a-form-item>
        <a-form-item label="整改限期">
          <a-date-picker
            v-decorator="['correctDateEnd', { rules: [{ required: true, message: '请选择' }] }]"
          />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea
            v-decorator="['remark', { rules: [{ required: false }] }]"
            placeholder="请输入"
            :rows="3"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import { political, regulation } from '@/services';
import { BASE } from '@/services/api';

const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    align: 'center',
    width: 80,
  },
  {
    title: '支部',
    dataIndex: 'branchName',
    key: 'branchName',
    align: 'center',
    width: 150,
  },
  {
    title: '部门',
    dataIndex: 'deptNames',
    key: 'deptNames',
    align: 'center',
    width: 150,
  },
  {
    title: '字',
    dataIndex: 'noticeWord',
    key: 'noticeWord',
    align: 'center',
    width: 80,
  },
  {
    title: '号',
    key: 'noticeNumber',
    dataIndex: 'noticeNumber',
    align: 'center',
    width: 80,
  },
  {
    title: '内容',
    key: 'violationContent',
    dataIndex: 'violationContent',
    scopedSlots: { customRender: 'violationContent' },
    align: 'center',
    width: 200,
  },
  {
    title: '整改限期',
    key: 'correctDateEnd',
    dataIndex: 'correctDateEnd',
    align: 'center',
    width: 200,
  },
  {
    title: '操作人',
    key: 'operateUserName',
    dataIndex: 'operateUserName',
    align: 'center',
    width: 200,
  },
  {
    title: '操作日期',
    key: 'operateDate',
    dataIndex: 'operateDate',
    align: 'center',
    width: 200,
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: 100,
  },
];

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

export default {
  name: 'violationsNotice',

  data() {
    return {
      BASE,
      thisYear: new Date().getFullYear(),
      cyclesing: 0,
      cyclesNumber: [
        { date: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
        { date: [1, 2, 3, 4] },
        { date: [1, 2] },
        { date: [1] },
      ],
      columns: columns,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      loading: false,
      visible: false,
      formItemLayout,
      form: this.$form.createForm(this, { name: 'political' }),
      confirmLoading: false,
      deptList: [],
      branchList: [],
      branchListDepartment: [],
      rowSelection: {
        selectedRowKeys: [],
        onChange: selectedRowKeys => (this.rowSelection.selectedRowKeys = selectedRowKeys),
      },
    };
  },

  created() {
    this.getDataSource(this.pagination);
    this.branchQuery();
  },

  methods: {
    //获取支部
    branchQuery() {
      regulation.branchQuery({ needDetail: true }).then(res => {
        console.log(res);
        this.branchList = res.data.items;
      });
    },

    //选择支部，获取部门
    handleChange(value) {
      console.log(value);
      this.branchList.map(item => {
        if (item.id === value) {
          this.branchListDepartment = item.departments;
        }
      });
      this.form.setFieldsValue({
        deptList: undefined,
      });
    },

    // 获取数据
    getDataSource({ current, pageSize }) {
      this.loading = true;
      political.politicsPage({ pageNo: current, pageSize }).then(res => {
        console.log(res);
        this.dataSource = res.data.content;
        this.dataSource.forEach(item => {
          item.relatedDepartments = item.relatedDepartments
            ? item.relatedDepartments.split(',')
            : [];
        });
        this.pagination.total = res.data.totalElements;
        this.loading = false;
      });
    },

    // 分页切换
    handleTableChange(pagination) {
      console.log(pagination);
      this.getDataSource(pagination);
    },

    // 下载
    onFileDownloadClick(item) {
      console.log(item);
      const elink = document.createElement('a');
      elink.target = '_blank';
      elink.href = `${BASE}/lookFile/download?fileId=${item.noticeFileId}`;
      elink.click();
    },

    // 新建确认
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          console.log('Received values of form: ', values);
          political
            .politicsSave(values)
            .then(res => {
              console.log(res);
              if (res.code === '200') {
                this.$message.success('新增成功');
                this.visible = false;
                this.form.resetFields();
                this.getDataSource(this.pagination);
              }
            })
            .catch(e => {
              this.$message.error(e);
            })
            .finally(() => {
              this.confirmLoading = false;
            });
        }
      });
    },

    // 取消新建
    handleCancel() {
      this.visible = false;
      this.form.resetFields();
    },

    // 新增
    handleAdd() {
      this.visible = true;
      this.getMax();
    },

    getMax() {
      political.politicsMax({}).then(res => {
        console.log(res, '===');
        if (res.code === '200') {
          this.form.setFieldsValue({
            noticeWord: res.data.word,
            noticeNumber: res.data.number,
          });
        }
      });
    },

    handleChangeCycle(value) {
      if (value == '月') {
        this.cyclesing = 0;
      } else if (value == '季') {
        this.cyclesing = 1;
      } else if (value == '半年') {
        this.cyclesing = 2;
      } else if (value == '年') {
        this.cyclesing = 3;
      }
      this.form.setFieldsValue({
        inspectionCycleNumber: '',
      });
    },

    // 批量删除
    handleDelAll() {
      console.log('批量删除', this.rowSelection.selectedRowKeys);
    },
  },
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
